| 七夕情人节表白 | 您所在的位置：网站首页 › 七夕情人节 图片 › 七夕情人节表白 |
七夕情人节表白
|
七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：
技术点：css-3d、js-随机色、js-transform 1.html： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 222.css：  
1 *{
2 margin:0;
3 padding:0;
4 }
5 body{
6 background:#000;
7 overflow:hidden;
8 }
9 .heart{
10 position:absolute;
11 left:0;
12 right:0;
13 top:0;
14 bottom:0;
15 width:200px;
16 height:260px;
17 margin: auto;
18 transform-style:preserve-3d;
19 perspective:800px;
20 animation:rot 15s linear infinite;
21 }
22 @keyframes rot{
23 from{transform:rotateY(0deg) rotateX(0deg)}
24 to{transform:rotateY(360deg) rotateX(360deg)}
25 }
26 .rib{
27 position:absolute;
28 width:200px;
29 height:260px;
30 border:solid red;
31 border-width:1px 1px 0 0;
32 border-radius:100% 100% 0/40% 100% 0;
33 transition: all 1s;
34 }
35 .cube{
36 position:absolute;
37 left:0;
38 right:0;
39 top:0;
40 bottom:0;
41 margin:auto;
42 width:100px;
43 height:100px;
44 color:red;
45 transform-style:preserve-3d;
46 transform:translateZ(50px);
47 }
48 .cube div{
49 position:absolute;
50 width:100px;
51 height:100px;
52 }
53 .cube div:nth-child(1){
54 left:0;
55 top:-100px;
56 transform-origin:bottom;
57 transform:rotateX(90deg);
58 }
59 .cube div:nth-child(2){
60 left:0;
61 top:100px;
62 transform-origin:top;
63 transform:rotateX(-90deg);
64 }
65 .cube div:nth-child(3){
66 left:-100px;
67 top:0px;
68 transform-origin:right;
69 transform:rotateY(-90deg);
70 }
71 .cube div:nth-child(4){
72 left:100px;
73 top:0px;
74 transform-origin:left;
75 transform:rotateY(90deg);
76 }
77 .cube div:nth-child(5){
78 left:0;
79 top:0px;
80 }
81 .cube div:nth-child(6){
82 left:0;
83 top:0px;
84 transform:translateZ(-100px);
85 }
View Code
3.js： 1 var heart = document.getElementsByClassName("heart")[0]; 2 for (var i = 0; i < 36; i++) { 3 var oDiv = document.createElement("div"); 4 oDiv.className = "rib"; 5 // 画36条心形曲线 6 oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)"; 7 var n = 0; 8 setInterval(function() { 9 if (n < 36) { 10 document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor(); 11 n = n + 1; 12 } else { 13 n = 0; 14 } 15 },1000) 16 console.log(n) 17 heart.appendChild(oDiv); 18 } 19 20 // 随机色 21 var getRandomColor = function(){ 22 return '#' + 23 (function(color){ 24 return (color += '0123456789abcdef'[Math.floor(Math.random()*16)]) 25 && (color.length == 6) ? color : arguments.callee(color); 26 })(''); 27 }图片资源自行填充。 下图效果只是添加了一个hover改变div的transform属性，大家可以扩展制作。
|
【本文地址】
公司简介
联系我们